<template>
  <div class='content'>
    <div class='title'>
      <div>
        <div class='op'></div>
        <p>预算信息</p>
      </div>
      <div class='btn'>
        <a-button type='primary'>下载科技预算书</a-button>
        <a-button type='primary'>WBS导出</a-button>
      </div>
    </div>
    <div>
      <div class='module-title' style='border-bottom: 1px solid #e3e3e3'>1、科技项目(课题)总概算</div>
      <div class='table-box'>
        <a-table :columns='allPriceForm' :data-source='formPriceAll' bordered :pagination='false'>
          <!-- <template slot="action" slot-scope="text, record">
            <a style="margin-right: 10px" @click="edit(record)">编辑</a>
            <a-popconfirm v-if="formdataall.length" title="是否确认删除？" @confirm="() => onDelete(record.key)">
              <a style="color: red" href="javascript:;">删除</a>
            </a-popconfirm>
          </template> -->
        </a-table>
      </div>
      <div class='card-box'>
        <div class='card' v-for='item in cardList' :key='item.label'>
          <h3>{{ item.num }} <span>万元</span></h3>
          <p>{{ item.label }}</p>
        </div>
      </div>
      <div class='module-title'>1、 设备与软件费（资本化支出）</div>
      <div class='module-title1'>
        <p>（1）设备购置/试制费（固定资产类）<span v-if='showHaiYou'>海发拨款：XX万元 </span>公司自筹：XX万元</p>

        <a-button type='primary' @click='visible1=true;categoryId=bigList[0].id'> 拨款&年度预算分配</a-button>
      </div>
      <div class='table-box'>
        <div class='btn'>
          <a-button type='primary' @click="addTableData('form1')"> 新增</a-button>
        </div>

        <a-table :columns='formall1' :data-source='formdataall1' bordered :pagination='false'>
          <!-- <template slot='device' slot-scope='text, record'>
            <p style='margin-right: 10px'>{{ getDeviceName(record) }}</p>
          </template> -->
          <template slot='type' slot-scope='text, record'>
            <p style='margin-right: 10px'>{{ getTypeName(record) }}</p>
          </template>
          <template slot='action' slot-scope='text, record'>
            <a style='margin-right: 10px' @click="edit(record, 'form1')">编辑</a>
            <a-popconfirm v-if='formdataall1.length' title='是否确认删除？' @confirm="() => onDelete(record,'form1')">
              <a style='color: red' href='javascript:;'>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
        <p>
          注：①本表仅针对可形成固定资产的设备支出项，单价≥10万元的设备购置或者试制内容需要逐项填写明细（对于科研平台建设项目酌情上调门槛额）；
        </p>

        <p>②类型*包括：购置、试制、升级改造；对于设备试制不需填列本表（6）列、（7）列；</p>

        <p>
          ③本表不得编列办公类设备费用或者主要用于生产技术活动的设备购置与试制费用；除科研平台建设项目外，其他项目(课题)原则上不得编列大型通用专业类设备的购置与试制费用；
        </p>

        <p>
          ④不能形成资产的设备相关费用（如：有的设备升级改造不能增加固定资产的）不在本表中列支，对于开展中试基地试验或现场工业试验活动发生的设备费应在（9）中特别说明；
        </p>

        <p>⑤对于实施科研采办前置的单位，课题组应根据本企业要求，在项目论证时提交其他相关材料，下同</p>
      </div>
      <div class='module-title1'>
        <p>(2)软件费与技术转让费（无形资产类）<span v-if='showHaiYou'>海发拨款：XX万元 </span> 公司自筹：XX万元</p>

        <a-button type='primary' @click='visible1=true;categoryId=smallList[1].id'> 拨款&年度预算分配</a-button>
      </div>
      <div class='table-box'>
        <div class='btn'>
          <a-button type='primary' @click="addTableData('form2')"> 新增</a-button>
        </div>
        <a-table :columns='formall2' :data-source='formdataall2' bordered :pagination='false'>
          <template slot='action' slot-scope='text, record'>
            <a style='margin-right: 10px' @click="edit(record, 'form2')">编辑</a>
            <a-popconfirm v-if='formdataall2.length' title='是否确认删除？' @confirm="() => onDelete(record, 'form2')">
              <a style='color: red' href='javascript:;'>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
        <p>注：①类型*包括：软件购置、软件开发、软件升级、技术转让；对于研制软件不填（4）和（5）；</p>
        <p>②本表不得含通用类办公与管理软件预算费用，除科研平台建设项目外、其他项目不得包含通用类专业软件预算费用；</p>
        <p>③对于开展中试基地试验或现场工业试验活动所发生的软件费事项应在（7）中予以特别说明；</p>
      </div>
      <div class='module-title'>2、材料/燃料动力</div>
      <div class='module-title1'>
        <p>（1）材料费 <span v-if='showHaiYou'>海发拨款：XX万元 </span> 公司自筹：XX万元</p>

        <a-button type='primary' @click='visible1=true;categoryId=smallList[2].id'> 拨款&年度预算分配</a-button>
      </div>
      <div class='table-box'>
        <div class='btn'>
          <a-button type='primary' @click="addTableData('form3')"> 新增</a-button>
        </div>
        <a-table :columns='formall3' :data-source='formdataall3' bordered :pagination='false'>
          <template slot='action' slot-scope='text, record'>
            <a style='margin-right: 10px' @click="edit(record, 'form3')">编辑</a>
            <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form3')">
              <a style='color: red' href='javascript:;'>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
        <p>注：①本表不得列支有关设备试制用的材料费预算，但应填写有关实验室试验、中试或者工业化试验的材料费支出；</p>
        <p>
          ②对于某品种材料预算合计10万元以上的大宗原辅材料、贵重材料需按项分别列示；材料可按类计，如密封圈（各种规格的密封圈）、玻璃器皿（试管、烧瓶等）；
        </p>
        <p>③不得列支主要用于试生产或生产活动的原材料、办公耗材。</p>
      </div>

      <div class='module-title1'>
        <p>（2）软件费与技术转让费（无形资产费） <span v-if='showHaiYou'>海发拨款：XX万元 </span>公司自筹：XX万元</p>

        <a-button type='primary' @click='visible1=true;categoryId=smallList[3].id'> 拨款&年度预算分配</a-button>
      </div>
      <div class='table-box'>
        <div class='btn'>
          <a-button type='primary' @click="addTableData('form4')"> 新增</a-button>
        </div>
        <a-table :columns='formall4' :data-source='formdataall4' bordered :pagination='false'>
          <template slot='action' slot-scope='text, record'>
            <a style='margin-right: 10px' @click="edit(record, 'form4')">编辑</a>
            <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'from4')">
              <a style='color: red' href='javascript:;'>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
        <p>注：①指电费、燃料费、水费、其他等消耗，对于5万元以上（含）支出项每项在表中予以列出；</p>
        <p>②用途*指实验室试验、中试试验、工业化试验。</p>
      </div>
      <div class='module-title'>3、外协实验/试验</div>
      <div class='module-title1'>
        <p>（1）测试化验加工费 <span v-if='showHaiYou'>海发拨款：XX万元 </span>公司自筹：XX万元</p>
      </div>
      <div class='table-box'>
        <div class='btn'>
          <a-button type='primary' @click="addTableData('form5')"> 新增</a-button>
        </div>
        <a-table :columns='formall5' :data-source='formdataall5' bordered :pagination='false'>
          <template slot='action' slot-scope='text, record'>
            <a style='margin-right: 10px' @click="edit(record, 'form5')">编辑</a>
            <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form5')">
              <a style='color: red' href='javascript:;'>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
        <p>注：①主要针对量大及价高的外协支出项，单个服务合同总费用在10万元（含）以上的，需按项填写明细；</p>

        <p>
          ②测试化验加工服务名称包括“XXXXX化验”、“XXX产品检测”、“XXX测试”、“XXX设计”、“XXX加工”、“XXX咨询服务”、“XXX安评/环评”等等；
        </p>

        <p>③对于开展中试基地试验或现场工业试验活动所发生的软件费事项应在（2）中予以特别说明；</p>

        <p>④服务单位可包括外部法人企业支持单位，也可包括内部经济独立核算单位，服务单位尚不确定的可不填单位名称；</p>

        <p>⑤本表不得以测算化验加工费的名义列支外委研究与开发费，或者服务项目中含有技术研究与开发的内容。</p>
      </div>
      <div class='module-title1'>
        <p>（2）试验费</p>
        <a-button type='primary' @click="addTableData('form6')"> 新增</a-button>
      </div>
      <div class='module-title1' style='dispaly: flex'>
        <p>成果试验活动1：
          <a-input v-model='activi'></a-input>
          <span v-if='showHaiYou'>海发拨款：XX万元 </span>公司自筹：XX万元
        </p>
        <a-button type='primary' @click='visible1=true;categoryId=smallList[4].id'> 拨款&年度预算分配</a-button>
      </div>
      <div class='table-box'>
        <!-- <div class='btn'>
          <a-button type='primary' @click="addTableData('form6')"> 新增</a-button>
        </div> -->
        <a-table :columns='formall6' :data-source='formdataall6' bordered :pagination='false'>
          <template slot='action' slot-scope='text, record'>
            <a style='margin-right: 10px' @click="edit(record, 'form6')">编辑</a>
            <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form6')">
              <a style='color: red' href='javascript:;'>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
        <p>
          注：①本表要列出试验活动直接支出的全部明细，按发生的设备购置与试制费、材料费、燃料动力费、测试化验加工费、工程作业服务费、运输与租赁费等名称列出，各费用在“备注”栏注
          明所计入的相应预算科目，其中仅有直接支付给试验工作服务方的总包或工程作业的试验服务费要计入“第二部分科技项目(课题)预算汇总表”的成果试验费预算科目；
        </p>

        <p>
          ②做成果工业化试验的费用预算必须同时符合以下几个要素方可编制：a.属于科研预算资金的专门安排，不含预期可用的生产资金和依托工程费用；b.属于非成熟技术成果的试验验证
          活动，
          不含依靠此新技术本阶段可获得甲方收入的试应用活动；c.纯属于工程化或工业化试验验证部分的费用（如开展某井局部井段的钻井成果试验，不能把整口井的钻井作业费及
          材料费都计入）。
        </p>
      </div>
      <div class='module-title' style='border-bottom: 1px solid #e3e3e3'>
        <p>4、外委研究费</p>
        <div class='btn'>
          <a-button type='primary' @click='visible1=true;categoryId=smallList[5].id'>拨款&年度预算分配</a-button>
        </div>
      </div>
      <div class='table-box'>
        <div class='btn'>
          <a-button type='primary' @click="addTableData('form7')"> 新增</a-button>
        </div>
        <a-table :columns='formall7' :data-source='formdataall7' bordered :pagination='false'>
          <template slot='action' slot-scope='text, record'>
            <a style='margin-right: 10px' @click="edit(record, 'form7')">编辑</a>
            <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form7')">
              <a style='color: red' href='javascript:;'>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
        <p>
          注：①外委应选用科研条件好的、有优势资源的协作单位，在同等条件下尽量利用公司内部资源，预算额度可参照市场价标准或者“在科研活动成本价基础上上溢20%”的标准进行测算；
        </p>

        <p>
          ②对于所属单位实施科技采办前置的或者实施科技采办绿色通道政策的，应按其有关规定进行，在项目(课题)专家论证时提供必要材料。
        </p>
      </div>
    </div>
    <div class='module-title' style='border-bottom: 1px solid #e3e3e3'>
      <p>5、出版/文献/信息传播/知识产权事务费</p>
      <div class='btn'>
        <a-button type='primary' @click='visible1=true;categoryId=smallList[6].id'>拨款&年度预算分配</a-button>
      </div>
    </div>
    <div class='table-box'>
      <div class='btn'>
        <a-button type='primary' @click="addTableData('form8')"> 新增</a-button>
      </div>
      <a-table :columns='formall8' :data-source='formdataall8' bordered :pagination='false'>
        <template slot='action' slot-scope='text, record'>
          <a style='margin-right: 10px' @click="edit(record, 'form8')">编辑</a>
          <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form8')">
            <a style='color: red' href='javascript:;'>删除</a>
          </a-popconfirm>
        </template>
      </a-table>
      <p>注：注：仅针对本科目各子科目中存在单笔支出5万元以上大额预算的，要填写测算依据及说明</p>
    </div>
    <div class='module-title' style='border-bottom: 1px solid #e3e3e3'>
      <p>6、会议/差旅/国际合作与交流</p>
    </div>
    <div class='module-title1'>
      <p>(1) 科目预算费用组成 <span v-if='showHaiYou'>海发拨款：XX万元 </span> 公司自筹：XX万元</p>

      <a-button type='primary' @click='visible1=true;categoryId=smallList[7].id'> 拨款&年度预算分配</a-button>
    </div>
    <div class='table-box'>
      <div class='btn'>
        <a-button type='primary' @click="addTableData('form9')"> 新增</a-button>
      </div>
      <a-table :columns='formall9' :data-source='formdataall9' bordered :pagination='false'>
        <template slot='action' slot-scope='text, record'>
          <a style='margin-right: 10px' @click="edit(record, 'form9')">编辑</a>
          <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form9')">
            <a style='color: red' href='javascript:;'>删除</a>
          </a-popconfirm>
        </template>
      </a-table>
    </div>
    <div class='module-title1'>
      <p>(2)国际合作及交流费 <span v-if='showHaiYou'>海发拨款：XX万元 </span>公司自筹：XX万元</p>

      <a-button type='primary' @click='visible1=true;categoryId=smallList[8].id'> 拨款&年度预算分配</a-button>
    </div>
    <div class='table-box'>
      <div class='btn'>
        <a-button type='primary' @click="addTableData('form10')"> 新增</a-button>
      </div>
      <a-table :columns='formall10' :data-source='formdataall10' bordered :pagination='false'>
        <template slot='action' slot-scope='text, record'>
          <a style='margin-right: 10px' @click="edit(record, 'form10')">编辑</a>
          <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form10')">
            <a style='color: red' href='javascript:;'>删除</a>
          </a-popconfirm>
        </template>
      </a-table>
      <p>注：交流类型包括：出国考察/交流、出国培训、出国参加国际会议、外国专家来华交流等。</p>
    </div>
    <div class='module-title' style='border-bottom: 1px solid #e3e3e3'>
      <p>7、专家咨询评审/劳务</p>
      <div class='btn'>
        <a-button type='primary' @click='visible1=true;categoryId=smallList[9].id'>拨款&年度预算分配</a-button>
      </div>
    </div>

    <div class='table-box'>
      <div class='btn'>
        <a-button type='primary' @click="addTableData('form11')"> 新增</a-button>
      </div>
      <a-table :columns='formall11' :data-source='formdataall11' bordered :pagination='false'>
        <template slot='action' slot-scope='text, record'>
          <a style='margin-right: 10px' @click="edit(record, 'form11')">编辑</a>
          <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form11')">
            <a style='color: red' href='javascript:;'>删除</a>
          </a-popconfirm>
        </template>
      </a-table>
      <p>注：①专家咨询与评审费应按照公司专家费标准执行；</p>
      <p>
        ②劳务费预算中若有编列访问学者及外部研究人员劳务费用时，应对其承担研究任务的必要性、投入工作时间的合理性以及费用标准予以说明。
      </p>
    </div>

    <div class='module-title' style='border-bottom: 1px solid #e3e3e3'>
      <p>8、其他费用</p>
      <div class='btn'>
        <a-button type='primary' @click='visible1=true;categoryId=smallList[10].id'>拨款&年度预算分配</a-button>
      </div>
    </div>
    <div class='table-box'>
      <div class='btn'>
        <a-button type='primary' @click="addTableData('form12')"> 新增</a-button>
      </div>
      <a-table :columns='formall12' :data-source='formdataall12' bordered :pagination='false'>
        <template slot='action' slot-scope='text, record'>
          <a style='margin-right: 10px' @click="edit(record, 'form12')">编辑</a>
          <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form12')">
            <a style='color: red' href='javascript:;'>删除</a>
          </a-popconfirm>
        </template>
      </a-table>
      <p>注：①税费：指公司拨款缴纳的增值税额，要据实填写；</p>
      <p>②除税费外，当其他子科目预算合计额若超规定的项目(课题)总预算额的3%时，须在表格中提供测算依据说明；</p>
      <p>③科研课题的租赁维修费科目预算中不得列支或分摊实验室基础设施的租赁/维修与装修费或自有仪器租赁或使用费 ；</p>
      <p>④本科目不得编列不可预见费、招待费、通讯费、人工成本、房租物业费及设备折旧费等预算。</p>
    </div>

    <div class='module-title' style='border-bottom: 1px solid #e3e3e3'>
      <p>9、间接经费配套</p>
      <div class='btn'>
        <a-button type='primary' @click='visible1=true;categoryId=smallList[11].id'>拨款&年度预算分配</a-button>

      </div>
    </div>
    <div class='table-box'>
      <div class='btn'>
        <a-button type='primary' @click="addTableData('form13')"> 新增</a-button>
      </div>
      <a-table :columns='formall13' :data-source='formdataall13' bordered :pagination='false'>
        <template slot='action' slot-scope='text, record'>
          <a style='margin-right: 10px' @click="edit(record, 'form13')">编辑</a>
          <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form13')">
            <a style='color: red' href='javascript:;'>删除</a>
          </a-popconfirm>
        </template>
      </a-table>
    </div>
    <div class='btn' style='padding-bottom: 150px;'>
      <a-button @click='previous'> 上一步</a-button>
      <a-button type='primary' @click='nextTab()'> 下一步</a-button>
    </div>
    <a-modal v-model='visible' title='新增' @ok='handleOk' width='80%'>
      <a-form :label-col='{ span: 8 }' :wrapper-col='{ span: 12 }'>
        <a-form-item
          v-decorator="[ {
          rules: [
              { required: true, message: '' },
              { validator: createValidator(item) }
          ]
      }]"
          :label='item.title' v-for='(item, index) in dia' :key='index'>
          <a-select
            v-model='item.value'
            placeholder='请选择'
            v-if="item.title ==='类型'"
          >
            <template v-if="type == 'form1'">
              <a-select-option :value='1'>购置</a-select-option>
              <a-select-option :value='2'>试制</a-select-option>
            </template>
            <template v-else-if="type == 'form2'">
              <a-select-option :value='1'>软件购置</a-select-option>
              <a-select-option :value='2'>软件开发</a-select-option>
              <a-select-option :value='3'>软件升级</a-select-option>
              <a-select-option :value='4'>技术转让</a-select-option>
            </template>
            <template v-else>
              <a-select-option :value='1'> 设备与软件费</a-select-option>
              <a-select-option :value='2'> 材料/燃料动力费</a-select-option>
              <a-select-option :value='3'> 外协实验/试验费</a-select-option>
              <a-select-option :value='4'> 外委研究费</a-select-option>
              <a-select-option :value='5'> 出版/文献/信息传播/知识产权事务费</a-select-option>
              <a-select-option :value='6'> 会议/差旅/国际合作与交流费</a-select-option>
              <a-select-option :value='7'> 专家咨询评审/劳务费</a-select-option>
              <a-select-option :value='8'> 其他费用</a-select-option>
              <a-select-option :value='9'> 间接经费配套</a-select-option>
            </template>
          </a-select>
          <a-input v-else-if="item.title!=='操作'" v-model='item.value'
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model='editVisible' title='编辑' @ok='handleUpdate' @cancel='handleCancel' width='80%'>
      <a-form :label-col='{ span: 8 }' :wrapper-col='{ span: 12 }'>
        <a-form-item :label='item.title' v-for='(item, index) in dia' :key="'update'+index">
          <a-select
            v-model='updateItem.deviceName'
            placeholder='请选择'
            v-if="item.title ==='设备名称'"
          >
            <a-select-option :value='0'> 设备购置费</a-select-option>
            <a-select-option :value='1'> 软件费与技术转让费</a-select-option>
            <a-select-option :value='2'> 设备试制费</a-select-option>
            <a-select-option :value='3'> 材料费</a-select-option>
            <a-select-option :value='4'> 燃料动力费</a-select-option>
            <a-select-option :value='5'> 测试化验加工费</a-select-option>
            <a-select-option :value='6'> 试验费</a-select-option>
            <a-select-option :value='7'> 外委研究费</a-select-option>
            <a-select-option :value='8'> 印刷出版费</a-select-option>
            <a-select-option :value='9'> 文献资料费</a-select-option>
            <a-select-option :value='10'> 专业通信费</a-select-option>
            <a-select-option :value='11'> 知识产权费</a-select-option>
            <a-select-option :value='12'> 会议费</a-select-option>
            <a-select-option :value='13'> 差旅费</a-select-option>
            <a-select-option :value='14'> 国际合作与交流费</a-select-option>
            <a-select-option :value='15'> 专家咨询评审费</a-select-option>
            <a-select-option :value='16'> 劳务费</a-select-option>
            <a-select-option :value='17'> 运输费</a-select-option>
            <a-select-option :value='18'> 租赁/维修费</a-select-option>
            <a-select-option :value='19'> 培训费</a-select-option>
            <a-select-option :value='20'> 办公费</a-select-option>
            <a-select-option :value='21'> 税费</a-select-option>
            <a-select-option :value='22'> 其他支出</a-select-option>
            <a-select-option :value='23'> 标准项目</a-select-option>
            <a-select-option :value='24'> 英才计划项目</a-select-option>
            <a-select-option :value='25'> 人工成本</a-select-option>
            <a-select-option :value='26'> 折旧费</a-select-option>
          </a-select>
          <a-select
            v-model='updateItem.type'
            placeholder='请选择'
            v-else-if="item.title ==='类型'"
          >
            <a-select-option :value='1'> 设备与软件费</a-select-option>
            <a-select-option :value='2'> 材料/燃料动力费</a-select-option>
            <a-select-option :value='3'> 外协实验/试验费</a-select-option>
            <a-select-option :value='4'> 外委研究费</a-select-option>
            <a-select-option :value='5'> 出版/文献/信息传播/知识产权事务费</a-select-option>
            <a-select-option :value='6'> 会议/差旅/国际合作与交流费</a-select-option>
            <a-select-option :value='7'> 专家咨询评审/劳务费</a-select-option>
            <a-select-option :value='8'> 其他费用</a-select-option>
            <a-select-option :value='9'> 间接经费配套</a-select-option>
          </a-select>
          <a-input v-else-if="item.title!=='操作'"
                   v-decorator="[ {
            rules: [
                { required: true, message: '' },
                { validator: createValidator(item) }
            ]
        }]"
                   v-model='updateItem[item.dataIndex]'></a-input>
        </a-form-item>
        <p>
        </p>
      </a-form>
    </a-modal>
    <a-modal v-model='visible1' title='年度预算' @ok='submitOk()' width='80%'>
      <a-table :columns='formall14' :data-source='formdataall14' bordered :pagination='false'>
        <template v-for='(items,indexes) in formall14' :slot='items.dataIndex' slot-scope='text, record'>
          <div :key='indexes'>
            <EditableCell v-if='record.key!=formdataall14[2].key' :text='text'
                          @change='onCellChange(record.key, items.dataIndex, $event)' />
            <span v-else>{{ text || '' }}</span>
          </div>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import EditableCell from './EditableCell.vue'
import data from './fakeData.js'
import {
  updateIndirct,
  indirctList,
  addIndirct,
  deleteIndirct,
  getAllPrice,
  detail,
  getCategory,
  getBigCategory,
  getSmallCategory,
  getDeviceTable,
  deleteDevice,
  addDevice,
  softDeviceTable,
  deleteSoftDevice,
  addSoftDevice,
  metralList
  ,
  deleteMetral,
  addmetral,
  fuelList,
  addFuel,
  deleteFuel,
  assayList,
  addAssay,
  deleteAssay,
  addTrial,
  trialList,
  deleteTrial,
  outList,
  deleteOut,
  addOut
  ,
  pubList,
  addPub,
  deletePub,
  exList,
  addEx,
  deleteEx,
  addCon,
  deleteCon,
  conList,
  addLu,
  deleteLu,
  luList,
  otherList,
  deleteOther,
  addOther,
  getPrice,
  saveBuget
} from '@/api/projectInitApply'
import {
  updateDevice,
  updateSoftDevice,
  updateMetral,
  updateFuel,
  updateAssay,
  updateTrial,
  updateOut,
  updateCon,
  updateEx,
  updateLu,
  updateOther
} from '@/api/updateBudget'
import { message } from 'ant-design-vue'

export default {
  props: {
    id: {
      // type: number,
      // default: '1742369449645895682'
      default: null
    }
  },
  components: {
    EditableCell
  },
  data() {
    return {
      visible: false,
      visible1: false,
      updateItem: {},
      editVisible: false,
      categoryName: null,
      categoryId: '',
      activi: '',
      dia: [],
      bigList: [],
      smallList: [],
      formdataall2: [],
      formdataall3: [],
      formdataall4: [],
      formdataall5: [],
      formdataall6: [],
      formdataall7: [],
      formdataall8: [],
      formdataall9: [],
      formdataall10: [],
      formdataall11: [],
      formdataall12: [],
      formdataall13: [],
      formdataall14: data.formdataall14,
      formall2: data.formall2,
      formall3: data.formall3,
      formall4: data.formall4,
      formall5: data.formall5,
      formall6: data.formall6,
      formall7: data.formall7,
      formall8: data.formall8,
      formall9: data.formall9,
      formall10: data.formall10,
      formall11: data.formall11,
      formall12: data.formall12,
      formall13: data.formall13,
      // deviceNameMap: data.deviceNameMap,
      typeNameMap: data.typeNameMap,
      projectData: {},
      showHaiYou: false,
      formall14: [
        {
          title: '项目（课题）经费',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
          value: ''
        },
        {
          title: '预算总额',
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' },
          value: ''
        },
        // {
        //     title: '2023年',
        //     dataIndex: 'pic',

        //     value: '',
        // },
        // {
        //     title: '2024年',
        //     dataIndex: 'pic1',

        //     value: '',
        // },
        {
          title: '备注',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },

          value: ''
        }
      ],
      allPriceForm: [],
      cardList: [],
      formdataall: [
        {
          key: '100987',
          name: '海油发展拨款',
          type: '00.00'
        },
        {
          key: '223314',
          name: '所属单位直接经费配套',
          type: '00.00'
        },
        {
          key: '33213',
          name: '所属单位间接经费配套',
          type: '00.00'
        },
        {
          key: '33253',
          name: '合计',
          type: '00.00'
        }
      ],
      formall: [
        {
          title: '项目(课题)经费',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '预算总额',
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '备注',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      formdataall1: [],
      formPriceAll: [
        {
          key: '100987',
          name: '海油发展拨款',
          type: '00.00'
        },
        {
          key: '223314',
          name: '所属单位直接经费配套',
          type: '00.00'
        },
        {
          key: '33213',
          name: '所属单位间接经费配套',
          type: '00.00'
        },
        {
          key: '33253',
          name: '合计',
          type: '00.00'
        }
      ],
      formall1: [
        {
          title: '设备名称',
          dataIndex: 'deviceName',
          with: 150,
          value: '',
          scopedSlots: { customRender: 'device' }
        },
        {
          title: '类型',
          dataIndex: 'type',
          value: '',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '单价（万元/一台）',
          dataIndex: 'price',
          width: 100,
          value: ''
        },
        {
          title: '数量（台套）',
          dataIndex: 'quantity',
          width: 100,
          value: ''
        },
        {
          title: '预算额（万元）',
          dataIndex: 'amount',
          width: 100,
          value: ''
        },
        {
          title: '型号/规格',
          dataIndex: 'spec',
          value: ''
        },
        {
          title: '制造商/国别',
          dataIndex: 'manufacturer',
          value: ''
        },
        {
          title: '主要技术性能指标',
          dataIndex: 'mainTechnical',
          width: 110
        },
        {
          title: '其他说明（与课题研究任务的关系）',
          dataIndex: 'otherNotes',
          width: 140,
          value: ''
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          width: 110,
          value: ''
        }
      ],
      type: ''
    }
  },
  watch: {
    visible1(val) {
      console.log(this.cardList)
      this.formdataall14 = data.formdataall14
      console.log(123,this.formdataall14);

      this.formdataall14.forEach(ele => {
        ele.type = 0
      })
      if (!this.id) {
        this.id = this.$route.query.id
      }
      if (val) {
        this.formall14 = [
          {
            title: '项目（课题）经费',
            dataIndex: 'name',

            value: ''
          },
          {
            title: '预算总额',
            dataIndex: 'type',
            value: ''
          }
        ],
          getCategory({
            categoryId: this.categoryId,
            mainId: this.id
          }).then(res => {
            res.data.forEach(dataItem => {
              let list = dataItem.years.map(year => {
                return {
                  title: year + '年',
                  dataIndex: year.toString(),
                  value: '',
                  scopedSlots: { customRender: year.toString() }
                }
              })
              this.formall14 = [...this.formall14, ...list]
              this.formall14.push({
                title: '备注',
                dataIndex: 'action',
                scopedSlots: { customRender: 'action' }
              })
              dataItem.list.forEach((listItem, index) => {
                this.formdataall14[index].type = listItem.amount
                this.formdataall14[index].action = listItem.memo
                listItem.bodyList.forEach(bodyListItem => {
                  this.formdataall14[index][bodyListItem.year] = bodyListItem.money
                  this.onCellChange(this.formdataall14[index].key, bodyListItem.year, bodyListItem.money)
                })
              })
            })
            let data = res.data[0]
            this.formdataall14[2][data.years[0]] = 0
            
            data.list.forEach(ele => {
              this.formdataall14.forEach(ele2 => {
                if (ele2.key == ele.payerId) {
                  ele2.type = ele.amount
                  this.formdataall14[2][data.years[0]] += ele.amount
                  this.formdataall14[0][data.years[0]] = ''
                }
              })
            })
            let amount = 0
            console.log(this.bigList)
            // 根据小类id找到大类id
            let bigId;
            this.smallList.forEach(ele=>{
              if(ele.id==this.categoryId){
                bigId = ele.categoryId
              }
            })
            this.bigList.forEach(ele => {
              this.cardList.forEach(ele2 => {
                if (bigId==ele.id&&ele.categoryName == ele2.label) {
                  if (ele2.num != 0) {
                    amount = ele2.num
                  }
                }
              })
            })
            this.formdataall14.forEach(ele => {
              if (ele.key == 4) {
                ele.type = amount
              }
              if (ele.key == 3) {
                ele.type = 0
              }
             })
            console.log(4444,data.list);
          if(data.list.length>0){
            this.formdataall14.forEach(form=>{
              data.list.forEach(ele=>{
              if(this.categoryId==ele.smallCategoryId){
                  if(ele.payerId==3&&form.key==3){
                      form.type+=ele.amount
                  }
                }
            })
            })

            this.formdataall14.forEach(ele => {
              if (ele.key == 4) {
                ele.type = amount
              }
            })
          }
          this.formdataall14[2].type = 0;
          this.formdataall14[2].type = this.formdataall14[0].type+this.formdataall14[1].type
          })
          
      }

      // this.formdataall14.forEach(ele=>{
      //   this.formdataall14.forEach(ele2=>{
      //   if(ele.key=='135987'&&ele2.name!='135987'){
      //     ele.type+=ele2.type
      //   }
      // })
      // })
    }
  },
  mounted() {
    this.detail()
    this.getBigCategory()
    this.getSmallCategory()
    this.getDeviceTable()
    this.softDeviceTable()
    this.assayList()
    this.fuelList()
    this.metralList()
    this.outList()
    this.trialList()
    this.pubList()
    this.exList()
    this.conList()
    this.luList()
    this.otherList()
    this.getPrice()
    this.getAllPrice()
    this.indirctList()
    // this.getCategoryTotal()
  },
  created() {
    this.getPrice()
    this.getAllPrice()
  },
  methods: {
    getAllPrice() {
      getAllPrice({
        mainId: this.id
      }).then(res => {

        // 创建新的 allPriceForm 和 formPriceAll
        this.allPriceForm = [
          {
            title: '项目（课题）经费',
            dataIndex: 'name',
            scopedSlots: { customRender: 'name' },
            value: ''
          },
          {
            title: '预算总额',
            dataIndex: 'type',
            scopedSlots: { customRender: 'type' },
            value: ''
          }
        ]
        this.formPriceAll = [
          { key: '3', name: '海油发展拨款', type: '00.00' },
          { key: '4', name: '所属单位直接经费配套', type: '00.00' },
          { key: '5', name: '所属单位间接经费配套', type: '00.00' },
          { key: '33253', name: '合计', type: '00.00' }
        ]

        res.data.forEach(dataItem => {
          dataItem.years.forEach(year => {
            if (!this.allPriceForm.some(col => col.title === year.toString())) {
              this.allPriceForm.push({
                title: year.toString(),
                dataIndex: year,
                value: ''
              }) // 如果该年份不存在，则添加到 allPriceForm
            }
            this.allPriceForm.push(
              {
                title: '备注',
                dataIndex: 'action',
                scopedSlots: { customRender: 'action' },
                value: ''
              }
            )
            this.formPriceAll.forEach(row => {
              if (!row.hasOwnProperty(year.toString())) {
                row[year.toString()] = '00.00' // 如果该年份不存在，则初始化为 '00.00'
              }
            })
          })

          dataItem.list.forEach(listItem => {
            let row = this.formPriceAll.find(row => row.key === listItem.payerId.toString())
            if (row) {
              if (!row.hasOwnProperty('action')) {
                row['action'] = ''
              }

              // Append 'memo' to 'action' column, separated by commas
              row['action'] += (row['action'] ? ', ' : ' ') + listItem.memo
              row.type = listItem.amount.toFixed(2) // 更新预算总额
              listItem.bodyList.forEach(bodyListItem => {
                row[bodyListItem.year.toString()] = (parseFloat(row[bodyListItem.year.toString()]) + bodyListItem.money).toFixed(2)
              })
            }
          })
          this.formPriceAll[3].type = res.data.reduce((total, ele) => {
            return total + ele.list.reduce((subTotal, item) => {
              return subTotal + item.bodyList.reduce((subSubTotal, subItem) => {
                return subSubTotal + (Number.isFinite(subItem.money) ? subItem.money : 0)
              }, 0)
            }, 0)
          }, 0).toFixed(2)
          this.formPriceAll[0].type = res.data.reduce((total, ele) => {
            return total + ele.list.reduce((subTotal, item) => {
              return subTotal + item.bodyList.reduce((subSubTotal, subItem) => {
                return subSubTotal + (Number.isFinite(subItem.money) ? subItem.money : 0)
              }, 0)
            }, 0)
          }, 0).toFixed(2)
          dataItem[0].years.forEach(year=>{
            this.formPriceAll[3][year] = res.data.reduce((total, ele) => {
            return total + ele.list.reduce((subTotal, item) => {
              return subTotal + item.bodyList.reduce((subSubTotal, subItem) => {
                return subSubTotal + (Number.isFinite(subItem.money) ? subItem.money : 0)
              }, 0)
            }, 0)
          }, 0).toFixed(2)
          })


          console.log(1122344, this.formPriceAll)
          this.formPriceAll.forEach(ele => {
            if (ele.action == ' null') {
              ele.action = ''
            }
          })
        })


      })

    },
    getCategoryTotal() {
      this.formdataall = [
        {
          key: '100987',
          name: '海油发展拨款',
          type: '00.00'
        },
        {
          key: '223314',
          name: '所属单位直接经费配套',
          type: '00.00'
        },
        {
          key: '33213',
          name: '所属单位间接经费配套',
          type: '00.00'
        },
        {
          key: '33253',
          name: '合计',
          type: '00.00'
        }
      ],
        this.formdataall.forEach(ele => {
          ele.type = 0
        })
      let item = this.smallList.filter(item => {
        return item.categoryId === this.categoryId
      })
      if (!this.id) {
        this.id = this.$route.query.id
      }

      this.formall = [
        {
          title: '项目（课题）经费',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
          value: ''
        },
        {
          title: '预算总额',
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' },
          value: ''
        },
        {
          title: '备注',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },

          value: ''
        }
      ],
        getCategory({
          mainId: this.id,
          categoryId: this.categoryId
        }).then(res => {
          let list = res.data[0].years.map(ele => {
            return {
              title: ele + '年',
              dataIndex: ele,
              value: '',
              scopedSlots: { customRender: ele }
            }
          })

          this.formall = [...this.formall, ...list]
          this.formdataall.forEach((item, index) => {
            this.formall.forEach(items => {
              if (items.dataIndex != 'name' && items.dataIndex != 'type') {
                this.formdataall[index][items.dataIndex] = ''
              }
            })
          })
          this.formdataall.forEach((i, index) => {
            let obj = {}
            for (let j in i) {
              if (j != 'undefined') {
                obj[j] = i[j]
              }
            }
            this.formdataall[index] = obj
          })
          res.data[0].list.forEach((i, index) => {
            this.formdataall[index].type = i.amount
            this.formdataall[index].action = i.memo
            for (let j in this.formdataall[index]) {
              if (j == i.year) {
                this.formdataall[index][j] = l.money
                this.onCellChange(this.formdataall[index].key, this.formdataall[index].dataIndex, l.money)
              }
            }
          })

        })

    },
    detail() {
      detail({ id: this.id }).then(res => {
        res.data.cycleTime = res.data.cycleStart + '~' + res.data.cycleEnd
        this.projectData = res.data
        if (res.data.projectSource === 2 || res.data.projectSource === 3 || res.data.projectSource === 4) {
          this.showHaiYou = true
        } else {
          this.showHaiYou = false
        }
      })
    },
    createValidator(item) {
      return (rule, value, callback) => {
        const fieldsToValidate = ['单价', '数量', '预算额', '计量单位']

        if (fieldsToValidate.some(field => item.title.includes(field))) {
          if (isNaN(value)) {
            callback('请输入一个有效的数字')
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
    },
    edit(record, type) {
      this.editVisible = true

      this.updateItem = record
      // this.updateItem.deviceName = this.deviceNameMap[record.deviceName]
      this.updateItem.typeName = this.typeNameMap[record.type]
      this.type = type
      if (type == 'form1') {
        this.dia = [...this.formall1]
      } else if (type == 'form2') {
        this.dia = [...this.formall2]
      } else if (type == 'form3') {
        this.dia = [...this.formall3]
      } else if (type == 'form4') {
        this.dia = [...this.formall4]
      } else if (type == 'form5') {
        this.dia = [...this.formall5]
      } else if (type == 'form6') {
        this.dia = [...this.formall6]
      } else if (type == 'form7') {
        this.dia = [...this.formall7]
      } else if (type == 'form8') {
        this.dia = [...this.formall8]
      } else if (type == 'form9') {
        this.dia = [...this.formall9]
      } else if (type == 'form10') {
        this.dia = [...this.formall10]
      } else if (type == 'form11') {
        this.dia = [...this.formall11]
      } else if (type == 'form12') {
        this.dia = [...this.formall12]
      } else if (type == 'form13') {
        this.dia = [...this.formall13]
      }
    },
    // getDeviceName(record){
    //   console.log(144,record.deviceName);
    //   // return this.deviceNameMap[record.deviceName]
    //   console.log(345, record)
    // },
    getTypeName(record) {
      return this.typeNameMap[record.type]
    },
    submitOk() {
      let item = this.smallList.filter(item => {
        return item.categoryId === this.categoryId
      })
      let list = []
      this.formdataall14.forEach((e, index) => {
        let objList = []
        if (index < this.formdataall14.length - 1) {
          for (let i in e) {
            if (i != 'name' && i != 'type' && i != 'action' && i != 'key' && i) {

              objList.push({
                // 'headId': Number(this.categoryId),
                'money': Number(e[i]),
                'year': Number(i)
              })
            }
          }
          let playerId
          if (e.name === '海油发展拨款') {
            playerId = 3
          } else if (e.name === '所属单位直接经费配套') {
            playerId = 4
          } else if (e.name === '所属单位间接经费配套	') {
            playerId = 5
          }
          let obj = {
            'amount': Number(e.type),
            'bodyList': objList,
            'mainId': this.id,
            'memo': e.action,
            'payerId': playerId,
            'smallCategoryId': Number(this.categoryId)
            // 'payerId': 0
          }
          list.push(obj)
        }
      })
      saveBuget({ 'list': list }).then(res => {
        this.getAllPrice()
        this.visible1 = false
        this.getPrice()
        // this.getCategoryTotal()
      }).catch(error => {
        this.$message.error(error.msg)
      })

    },
    nextTab(isTriggerExternal) {
      if (isTriggerExternal) {
        this.$router.push({ path: '/initManage' })
      } else this.$emit('next', 3)
    },
    previous() {
      this.$emit('previous', 1)
    },
    onCellChange(key, dataIndex, value) {
      const dataSource = [...this.formdataall14]
      const target = dataSource.find(item => item.key === key)
      if (target) {
        target[dataIndex] = value
        target.type = 0
        for (let i in target) {

          if (i != 'name' && i != 'type' && i != 'action' && i != 'key') {

            if (i && i != 'undefined') {
              target.type += Number(target[i])
            }
          }
        }
        for (let i in dataSource[dataSource.length - 1]) {
          if ((i != 'name' && i != 'action' && i != 'key')) {
            dataSource[dataSource.length - 1][i] = 0
            dataSource.forEach((e, index) => {

              if (index < dataSource.length - 1) {
                if (i) {
                  if (e[i]) {
                    dataSource[dataSource.length - 1][i] += Number(e[i])
                  }
                }

              }
            })
          }

        }
        this.formdataall14 = dataSource
      }
    },
    getPrice() {
      getPrice({
        projectApplicationId: this.id
      }).then(res => {
        this.cardList = res.data.map((ele) => {
          return {
            num: ele.amount,
            label: ele.categoryName
          }
        })
        // console.log(this.formdataall1);
      })
    },
    getBigCategory() {
      getBigCategory().then(res => {
        this.bigList = res.data
        console.log(this.bigList)
      })
    },
    getDeviceTable() {
      // this.id = '1742369449645895682'
      getDeviceTable({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall1 = res.data
        // console.log(this.formdataall1);
      })
    },
    softDeviceTable() {
      // this.id = '1742369449645895682'
      softDeviceTable({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall2 = res.data
        console.log(res.data)
      })
    },
    indirctList() {
      indirctList({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall13 = res.data
        console.log(res.data)
      })
    },
    fuelList() {
      fuelList({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall4 = res.data
        console.log(res.data)
      })
    },
    assayList() {
      assayList({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall5 = res.data
        console.log(res.data)
      })
    },
    trialList() {
      trialList({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall6 = res.data
        console.log(res.data)
      })
    },
    outList() {
      outList({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall7 = res.data
        console.log(res.data)
      })
    },
    pubList() {
      pubList({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall8 = res.data
        console.log(res.data)
      })
    },
    exList() {
      exList({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall9 = res.data
        console.log(res.data)
      })
    },
    conList() {
      conList({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall10 = res.data
        console.log(res.data)
      })
    },
    luList() {
      luList({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall11 = res.data
        console.log(res.data)
      })
    },
    otherList() {
      otherList({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall12 = res.data
        console.log(res.data)
      })
    },
    metralList() {
      metralList({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall3 = res.data
        console.log(res.data)
      })
    },
    getSmallCategory() {
      getSmallCategory().then(res => {
        this.smallList = res.data
      })
    },
    onDelete(record, type) {
      console.log('type', type, record)
      if (type == 'form1') {
        const dataSource = [...this.formdataall1]
        deleteDevice({ id: record.id }).then(res => {
          if (res) {
            this.getDeviceTable()
          }
        })
        // this.formdataall1 = dataSource.filter((item) => item.key !== key)
      } else if (type == 'form2') {
        deleteSoftDevice({ id: record.id }).then(res => {
          if (res) {
            this.softDeviceTable()
          }
        })
        const dataSource = [...this.formdataall2]
        this.formdataall2 = dataSource.filter((item) => item.key !== key)
      } else if (type == 'form3') {
        deleteMetral({ id: record.id }).then(res => {
          if (res) {
            this.metralList()
          }
        })
        // const dataSource = [...this.formdataall3]
        // this.formdataall3 = dataSource.filter((item) => item.key !== key)
      } else if (type == 'form4') {
        deleteFuel({ id: record.id }).then(res => {
          if (res) {
            this.fuelList()
          }
        })
      } else if (type == 'form5') {
        deleteAssay({ id: record.id }).then(res => {
          if (res) {
            this.assayList()
          }
        })
      } else if (type == 'form6') {
        deleteTrial({ id: record.id }).then(res => {
          if (res) {
            this.trialList()
          }
        })
      } else if (type == 'form7') {
        deleteOut({ id: record.id }).then(res => {
          if (res) {
            this.outList()
          }
        })
      } else if (type == 'form8') {
        deletePub({ id: record.id }).then(res => {
          if (res.code == 200) {
            this.pubList()
          }
        })
      } else if (type == 'form9') {
        deleteEx({ id: record.id }).then(res => {
          if (res.code == 200) {
            this.exList()
          }
        })
      } else if (type == 'form10') {
        deleteCon({ id: record.id }).then(res => {
          if (res.code == 200) {
            this.conList()
          }
        })
      } else if (type == 'form11') {
        deleteLu({ id: record.id }).then(res => {
          if (res.code == 200) {
            this.luList()
          }
        })
      } else if (type == 'form12') {
        deleteOther({ id: record.id }).then(res => {
          if (res.code == 200) {
            this.otherList()
          }
        })
      } else if (type == 'form13') {
        deleteIndirct({ id: record.id }).then(res => {
          if (res.code == 200) {
            this.indirctList()
          }
        })
      }
    },
    addTableData(type) {
      this.visible = true
      this.type = type
      console.log(type)
      if (type == 'form1') {
        console.log(444, this.dia)
        this.dia = [...this.formall1]
      } else if (type == 'form2') {
        this.dia = [...this.formall2]
      } else if (type == 'form3') {
        this.dia = [...this.formall3]
      } else if (type == 'form4') {
        this.dia = [...this.formall4]
      } else if (type == 'form5') {
        this.dia = [...this.formall5]
      } else if (type == 'form6') {
        this.dia = [...this.formall6]
      } else if (type == 'form7') {
        this.dia = [...this.formall7]
      } else if (type == 'form8') {
        this.dia = [...this.formall8]
      } else if (type == 'form9') {
        this.dia = [...this.formall9]
      } else if (type == 'form10') {
        this.dia = [...this.formall10]
      } else if (type == 'form11') {
        this.dia = [...this.formall11]
      } else if (type == 'form12') {
        this.dia = [...this.formall12]
      } else if (type == 'form13') {
        this.dia = [...this.formall13]
      }
    },
    handleOk(value) {
      console.log(value, this.dia)
      const xxx = {}
      this.dia.forEach((item, index) => {
        xxx[item.dataIndex] = item.value
      })
      // this.id = '1742369449645895682'
      if (!this.id) {
        this.id = this.$route.query.id
      }
      xxx.mainId = this.id
      console.log('xxx', xxx, this.type)
      xxx.mainId = this.id
      if (this.type == 'form1') {
        addDevice(xxx).then(res => {
          this.getDeviceTable()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form2') {
        addSoftDevice(xxx).then(res => {
          this.softDeviceTable()
          this.getPrice()
          this.getAllPrice()
        })
        // this.formdataall2.push(xxx)
      } else if (this.type == 'form3') {
        // this.formdataall3.push(xxx)
        addmetral(xxx).then(res => {
          this.metralList()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form4') {
        addFuel(xxx).then(res => {
          this.fuelList()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form5') {
        addAssay(xxx).then(res => {
          this.assayList()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form6') {
        addTrial(xxx).then(res => {
          this.trialList()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form7') {
        addOut(xxx).then(res => {
          this.outList()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form8') {
        console.log('form8')
        xxx.devicetName = xxx.subjectName
        console.log('1233444444', xxx)
        addPub(xxx).then(res => {
          this.pubList()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form9') {
        addEx(xxx).then(res => {
          this.exList()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form10') {
        addCon(xxx).then(res => {
          this.conList()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form11') {
        addLu(xxx).then(res => {
          this.luList()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form12') {
        addOther(xxx).then(res => {
          this.otherList()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form13') {
        addIndirct(xxx).then(res => {
          this.indirctList()
          this.getPrice()
          this.getAllPrice()
        })
      }
      this.visible = false

    },
    handleUpdate(value) {
      console.log(134, this.updateItem)
      if (this.type == 'form1') {
        updateDevice(this.updateItem).then(res => {
          this.getDeviceTable()
          this.getPrice()
        })
      } else if (this.type == 'form2') {
        updateSoftDevice(this.updateItem).then(res => {
          this.softDeviceTable()
          this.getPrice()
        })
        // this.formdataall2.push(this.updateItem)
      } else if (this.type == 'form3') {
        // this.formdataall3.push(this.updateItem)
        updateMetral(this.updateItem).then(res => {
          this.metralList()
          this.getPrice()
        })
      } else if (this.type == 'form4') {
        updateFuel(this.updateItem).then(res => {
          this.fuelList()
          this.getPrice()
        })
      } else if (this.type == 'form5') {
        updateAssay(this.updateItem).then(res => {
          this.assayList()
          this.getPrice()
        })
      } else if (this.type == 'form6') {
        updateTrial(this.updateItem).then(res => {
          this.trialList()
          this.getPrice()
        })
      } else if (this.type == 'form7') {
        updateOut(this.updateItem).then(res => {
          this.outList()
          this.getPrice()
        })
      } else if (this.type == 'form8') {
        addPub(this.updateItem).then(res => {
          this.pubList()
          this.getPrice()
        })
      } else if (this.type == 'form9') {
        updateEx(this.updateItem).then(res => {
          this.exList()
          this.getPrice()
        })
      } else if (this.type == 'form10') {
        updateCon(this.updateItem).then(res => {
          this.conList()
          this.getPrice()
        })
      } else if (this.type == 'form11') {
        updateLu(this.updateItem).then(res => {
          this.luList()
          this.getPrice()
        })
      } else if (this.type == 'form12') {
        updateOther(this.updateItem).then(res => {
          this.otherList()
          this.getPrice()
        })
      } else if (this.type == 'form13') {
        updateIndirct(this.updateItem).then(res => {
          this.indirctList()
          this.getPrice()
        })
      }
      this.editVisible = false
    },
    handleCancel() {
      // this.updateItem.type = Object.entries(this.typeNameMap).find(([key, val]) => val === this.updateItem.type);
      // this.updateItem.deviceName = Object.entries(this.deviceNameMap).find(([key, val]) => val === this.updateItem.deviceName);
      console.log(12345555, this.updateItem)

    }
  }
}
</script>

<style lang='less' scoped>
.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
  padding-right: 24px;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}

.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 18px;
  display: none;
}

.editable-cell-icon-check {
  line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}

.editable-add-btn {
  margin-bottom: 8px;
}

.content {
  height: 100%;
  width: 100%;
  padding-left: 20px;
  padding-top: 10px;

  .title {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 0;

    div {
      display: flex;
      align-items: center;

      p {
        margin: 0;
      }
    }

    .op {
      height: 20px;
      width: 5px;
      background: #0084ff;
      margin-right: 10px;
    }

    .btn {
      button {
        margin-left: 10px;
      }
    }
  }

  .module-title {
    font-size: 18px;
    font-weight: 800;
    margin: 5px 0;
    padding-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .module-title1 {
    display: flex;
    padding-bottom: 3px;
    border-bottom: 1px solid #e3e3e3;
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      margin: 0;
    }
  }

  .table-box {
    margin: 10px 0;

    .btn {
      width: 100%;
      text-align: right;
      margin-bottom: 5px;
    }

    p {
      font-size: 12px;
      margin: 0;
    }
  }

  .card-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .card {
      height: 80px;
      width: 16%;
      border: 1px solid #e3e3e3;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      padding: 10px 10px;
      box-sizing: border-box;

      h3 {
        font-size: 29px;
        font-weight: 800;
        margin: 0;

        span {
          font-size: 14px;
        }
      }

      p {
        font-size: 12px;
      }
    }
  }
}
</style>
